<template>
  <div>
    <Table :columns="columns8" :data="data7" size="small" ref="table"></Table>
    <br />
    <Button type="primary" size="large" @click="exportData(1)"
      ><Icon type="ios-download-outline"></Icon> Export source data</Button
    >
    <Button type="primary" size="large" @click="exportData(2)"
      ><Icon type="ios-download-outline"></Icon> Export sorting and filtered
      data</Button
    >
    <Button type="primary" size="large" @click="exportData(3)"
      ><Icon type="ios-download-outline"></Icon> Export custom data</Button
    >
  </div>
</template>
<script>
    export default {
        data () {
            return {
                columns8: [
                    {
                        title: 'Name',
                        key: 'name',
                        fixed: 'left',
                        width: 200
                    },
                    {
                        title: 'Show',

                        key: 'show',
                        width: 150,
                        sortable: true,
                        filters: [
                            {
                                label: 'Greater than 4000',
                                value: 1
                            },
                            {
                                label: 'Less than 4000',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod (value, row) {
                            if (value === 1) {
                                return row.show > 4000;
                            } else if (value === 2) {
                                return row.show < 4000;
                            }
                        }
                    },
                    {
                        title: 'Weak',
                        key: 'weak',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: 'Signin',
                        key: 'signin',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: 'Click',
                        key: 'click',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: 'Active',
                        key: 'active',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: '7, retained',
                        key: 'day7',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: '30, retained',
                        key: 'day30',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: 'The next day left',
                        key: 'tomorrow',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: 'Day Active',
                        key: 'day',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: 'Week Active',
                        key: 'week',
                        width: 150,
                        sortable: true
                    },
                    {
                        title: 'Month Active',
                        key: 'month',
                        width: 150,
                        sortable: true
                    }
                ],
                data7: []
            };
        },
        methods: {
            exportData (type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: 'The original data'
                    });
                } else if (type === 2) {
                    this.$refs.table.exportCsv({
                        filename: 'Sorting and filtering data',
                        original: false
                    });
                } else if (type === 3) {
                    this.$refs.table.exportCsv({
                        filename: 'Custom data',
                        columns: this.columns8.filter((col, index) => index < 4),
                        data: this.data7.filter((data, index) => index < 4)
                    });
                }
            }
        }
    };
</script>
